<template>
         <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
       <router-link to="/ListViolationRecord">违章记录</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>修改违章记录</el-breadcrumb-item>
 </el-breadcrumb></div>
<el-form ref="ruleFormRef" style="max-width: 500px" :model="form" :rules="rules" label-width="auto" 
        class="demo-ruleForm" :size="formSize" status-icon>

      <el-form-item label="违章标题：" prop="violationTitle">
        <el-input v-model="form.violationTitle" placeholder="请输入违章标题" />
      </el-form-item>

      <el-form-item label="车牌号：" prop="licensePlateNumber">
       <el-select v-model="form.licensePlateNumber" placeholder="请选择车牌号">
        <el-option v-for="item in PlateNumber" :label="item.plateNumber" :value="item.plateNumber" />

      </el-select>
      </el-form-item>


      <el-form-item label="违章人：" prop="violators">
        <el-input v-model="form.violators" placeholder="请输入违章人" />
      </el-form-item>
      
        <el-form-item label="违章日期:" prop="violationDate">
              <el-date-picker
             v-model="form.violationDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入违章日期"
            style="width: 100%"
          />
 
      </el-form-item>
        <el-form-item label="违章内容:" prop="violationContent">
        <el-input v-model="form.violationContent" type="textarea" placeholder="请输入违章内容"/>
      </el-form-item>
        <el-form-item label="处罚结果:" prop="punishmentContent">
        <el-input v-model="form.punishmentContent" type="textarea" placeholder="请输入处罚结果"/>
      </el-form-item>
        
      <el-form-item label="备注:" prop="notes">
        <el-input v-model="form.notes" type="textarea" />
      </el-form-item>


  <el-row type="flex" justify="end">
  
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>

  </el-row>
</el-form>
      
</template>
<script lang="ts" setup>
//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//变量
const form= reactive({
 
  "violationRecordsId": route.query.id,
 
  "violationTitle": "",
  "licensePlateNumber": "",
  "violators": "",
  "violationDate": "",
  "violationContent": "",
  "punishmentContent": "",
  "notes": "",
  "createdBy": "",
  "createdDate": "",
  "deletedBy": "",
  "deletedDate": "",
})
//方法
const getViolationRecord = async () => {
    axios.get("/carwrite/api/ViolationRecord/ViolationRecordGetBy?ViolationRecordsId=" + form.violationRecordsId).then((res) => {
form.violationRecordsId = res.data.data.violationRecordsId   
        form.violationTitle = res.data.data.violationTitle
        form.licensePlateNumber = res.data.data.licensePlateNumber
        form.violators = res.data.data.violators
        form.violationDate = res.data.data.violationDate
        form.violationContent = res.data.data.violationContent
        form.punishmentContent = res.data.data.punishmentContent
      form.notes = res.data.data.notes
      form.createdBy = res.data.data.createdBy
      form.createdDate = res.data.data.createdDate
      form.deletedBy = res.data.data.deletedBy
      form.deletedDate = res.data.data.deletedDate
     })
}
//显示车牌号
const PlateNumber:any=ref([])
const showLicensePlateNumber = async () => {
    axios.get("/bread/api/Vehicles/GetVehicleShowPlateNumber").then((res) => {
        PlateNumber.value = res.data.data
    })
}
//修改违章记录
import  { ElMessage } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    violationTitle: [
        { required: true, message: '违章标题不能为空', trigger: 'blur' },
        
    ],
    licensePlateNumber: [
        { required: true, message: '车牌号不能为空', trigger: 'blur' },
        
    ],
    violators: [
        { required: true, message: '违章人不能为空', trigger: 'blur' },
        
    ],

    violationDate: [
        { required: true, message: '违章日期不能为空', trigger: 'blur' },
        
    ],
    violationContent: [
        { required: true, message: '违章内容不能为空', trigger: 'blur' },
        
    ],
    punishmentContent: [
        { required: true, message: '处罚结果不能为空', trigger: 'blur' },
        
    ],
    
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
           
            axios.post("/carwrite/api/ViolationRecord/UpdateViolationRecord", form).then(ter => {
                if (ter.data.code > 0) {
                    ElMessage.success("修改成功")
                  router.push("/ListViolationRecord")
                } else {
                    ElMessage.error("修改失败")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = () => {
router.push("/ListViolationRecord")
}
//钩子函数
onMounted(async () => {
    showLicensePlateNumber()//获取车牌号
       getViolationRecord()//获取违章记录(反填)
})
</script>

 



